@font-face {
    font-family: "Droid Serif";
    font-style: normal;
    font-weight: 700;
    src: local("Droid Serif Bold"), local("DroidSerif-Bold"), url("http://themes.googleusercontent.com/static/fonts/droidserif/v3/QQt14e8dY39u-eYBZmppwTqR_3kx9_hJXbbyU8S6IN0.woff") format("woff");
}
@font-face {
    font-family: "Droid Serif";
    font-style: normal;
    font-weight: 400;
    src: local("Droid Serif"), local("DroidSerif"), url("http://themes.googleusercontent.com/static/fonts/droidserif/v3/0AKsP294HTD-nvJgucYTaIbN6UDyHWBl620a-IRfuBk.woff") format("woff");
}
@font-face {
    font-family: "Source Sans Pro";
    font-style: normal;
    font-weight: 400;
    src: local("Source Sans Pro"), local("SourceSansPro-Regular"), url("http://themes.googleusercontent.com/static/fonts/sourcesanspro/v2/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff") format("woff");
}
@font-face {
    font-family: "Droid Serif";
    font-style: italic;
    font-weight: 400;
    src: local("Droid Serif Italic"), local("DroidSerif-Italic"), url("http://themes.googleusercontent.com/static/fonts/droidserif/v3/cj2hUnSRBhwmSPr9kS5899kZXW4sYc4BjuAIFc1SXII.woff") format("woff");
}
@font-face {
    font-family: "Source Sans Pro";
    font-style: normal;
    font-weight: 600;
    src: local("Source Sans Pro Semibold"), local("SourceSansPro-Semibold"), url("http://themes.googleusercontent.com/static/fonts/sourcesanspro/v2/toadOcfmlt9b38dHJxOBGJ6-ys_j0H4QL65VLqzI3wI.woff") format("woff");
}


/* =============================================================================
   HTML5 Boilerplate CSS: h5bp.com/css
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;  
       background:url(../img/bluebackground.png)repeat-x,#f1f1f1;
}

html.lt-ie9{
    background:url(../img/ie-bluebackground.jpg);
    background-repeat: repeat-x;
}

html, button, input, select, textarea { font-family: 'Source Sans Pro',sans-serif; color: #4a4a49;}
body { margin: 0; font-size: 1em; line-height: 1.4; }

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

a {     font-weight: 500; 
        color:#29A7DA;text-decoration: none;transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        -webkit-transition: all 0.4s ease-in-out; }  
a:hover, a:active { outline: 0;color:#5dcaf9;transition: all 0.4s ease-in-out;
                    -moz-transition: all 0.4s ease-in-out;
                    -o-transition: all 0.4s ease-in-out;
                    -webkit-transition: all 0.4s ease-in-out; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; color:#888889; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0 0 0 15px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

svg:not(:root) { overflow: hidden; }

figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }


/* ===== Initializr Styles =====================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body{ font:'Source Sans Pro',Helvetica, Arial; line-height: 1.5; font-size:16px; }

h1{font-family: 'Droid Serif',sans-serif; font-weight: 400;}
h1{letter-spacing: -2px;   font-size:3em; }
h2 {
    font-size: 2.25em;
    margin-bottom: 10px;
    margin-top: 0;
    padding-bottom: 0;
    letter-spacing: -2px;
    font-weight: 600;
}



h3{
    font-size: 1.8em;
    margin:10px 0;
    font-weight: 600;
}

h4 {
    font-size: 1.2em;
    font-weight: 400;
}

article{margin:0 4%;}
article.home{margin-top:0;float: left;}
article.home-middle{margin-top:0;float: left;}
.lt-ie9 article.home-middle{clear:left;width:100%;margin:0;}
section.home-karya{position: relative;border-left: 1px solid #EDEDED;padding-left:1.9%;padding-right: 1.9%;}
.two3.home-karya{width: 62.6%; padding-left:1.9%;padding-right: 1.9%;margin-right: 0;}

#overlay {background: rgba(255,255,255,0.1) url(../img/ajax-loader.gif) center center no-repeat; position: fixed; top: 0; left: 0; z-index: 20000; height:100%; width:100%}
.lt-ie9 #overlay,.no-js #overlay {display:none;}

/*logo normalize*/
.lt-ie9 .ie-hidden{display:block}
.ie-hidden{display:none}

#header-container,#footer-container,#main aside{}
#title{ color:white; }
::-moz-selection { background: #f16529; color: #fff; text-shadow: none; }
::selection      { background: #f16529; color: #fff; text-shadow: none; }
/* ==============
    MOBILE: Menu
   ============== */
nav{ background:#33342e;
     float:left;
     width:100%;
     border-radius: 6px 6px 0 0;
}

nav a.home{border-radius:4px 0 0 0;}
nav a{
    float: left;
    display:block;
    padding:12px 2%;
    color:white;
    text-align:center;
    text-decoration:none;
}
.lt-ie9 nav a{
    padding:10px 1.5%;
}


.lt-ie9.lt-ie8 nav li{
    float: left;
}

.lt-ie9 .carousel-nav-wrapper li{
    float: left;
    padding:0 10px;
}
nav a:hover, nav a:visited{
    color:white;
}
nav a {  transition: all 0.2s ease-in-out;
         -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
         -webkit-transition: all 0.2s ease-in-out; }
nav a:hover { background-color: #4b4b49;
              transition: all 0.2s ease-in-out;
              -moz-transition: all 0.2s ease-in-out;
              -o-transition: all 0.2s ease-in-out;
              -webkit-transition: all 0.2s ease-in-out;}
nav a.selected { background-color: #1d1d1b;
                 transition: all 0.2s ease-in-out;
                 -moz-transition: all 0.2s ease-in-out;
                 -o-transition: all 0.2s ease-in-out;
                 -webkit-transition: all 0.2s ease-in-out;}

nav li.contact{
    padding:12px 1%;
    float:right;
    font-size: 85%;
    color:#989898;
}
nav li.contact.first{
    padding-right:2.5%;
}
.lt-ie9 nav li.contact.first{
    padding-right:0.5%;
}


.administrator nav li.contact{
    padding:10px 1%;
}
.lt-ie9 .administrator nav li.contact{
    padding:1px;
}
.administrator nav li.contact p{
    margin:0;
    padding:4px 0;
}



/* ==============
    MOBILE: Main
   ============== */
.cfs-logo{margin:15px auto;width: 30%;text-align: left;float:left}
.medial{width: 40%;margin: 15px auto 0;text-align: right;float:right;color:#fff; margin-bottom: 0px;font-size: 85%}
.medial ul{padding: 0;margin: 0; }
.medial li{list-style: none; margin-bottom: 8px;}
.medial li.icons{float: right; background: url('../img/medial2.png') 0 -32px;  }

.medial a.icon {width: 32px; height: 32px; overflow: hidden; float: left;text-indent: -9999px; background: url('../img/medial2.png') 0 0; opacity:0;}
.medial li.icons a.icon:hover {opacity: 1}
.medial a.icon.yahoo{background-position: -96px 0;}
.medial a.icon.facebook{background-position:0 0;}
.medial a.icon.skype{background-position: -32px 0;}
.medial a.icon.twitter{background-position: -64px 0;}

#main{
    background:url(../img/sec_texture.png) repeat;
    padding-bottom: 2%;
    position:relative;
    background-color: rgb(68,68,68); /* Needed for IEs */
    box-shadow: 0px 0px 10px rgba(68,68,68,0.2);
    border-radius: 6px;
}

.lt-ie7 #main{
    background:url(../img/ie-sec_texture.jpg) repeat;

}


/*****************************************SUBMENU*/
#main #submenu {
    background:#888889;
    float:left;
    width:100%;
    z-index: 100;
}
#submenu ul{ list-style: none; margin: 0; padding: 0; }
#submenu li{    padding:10px 2%;float: left;}
#submenu a{    
    padding:2px 10px;
    display:block;

    text-decoration:none;
}


#submenu a:hover{    
    color:#d7d7d7
}
#submenu a,#submenu a:visited{    
    color:#fff
}
#submenu .selected a{background-color: #707070;
                     border-radius: 4px;
                     transition: all 0.2s ease-in-out;
                     -moz-transition: all 0.2s ease-in-out;
                     -o-transition: all 0.2s ease-in-out;
                     -webkit-transition: all 0.2s ease-in-out;}
/*****************************************SUBMENU*/


/*tagline---------------------------------------*/
#main section.tagline{
    width:100%;
    margin:30px 0;
    float: left;
}

.tagline h2 {
    margin-bottom: 10px;
    margin-top: 0;
    padding-bottom: 0;
}


#main section.normal .subheader h2  {margin:15px 0; text-align: center;}
#main section.normal .subheader h3  {margin:10px 0; text-align: center;}

#main section.tagline.home{
    background: url("../img/atap.jpg") no-repeat scroll 95% 50% transparent;
}
#main section.tagline.about{
    background: url("../img/foto.jpg") no-repeat scroll 95% 50% transparent;
}

#main section.tagline h1 {
    margin: 5px 0;
    color: #1D1D1B;
}

#main section.tagline .text{width: 100%; text-align: center;}
#main section.tagline .hometext{width: 60%; text-align: left;}
article.home,article.welcome {margin:0;float:left;}
article.home section{float:left;background: #1d1d1b;width: 100%; margin-top:0;}
article.welcome {padding:50px 4%;background : url("../img/profic81r.png") no-repeat scroll 95% 50%, none repeat scroll 0 0 #E1EBF6}

/*tagline---------------------------------------*/

/*SECTION NORMAL*/
#main section.normal {
    width: 100%;
}
img.full_img{width: 100%}
img.center_img{width: 90%; margin-left:5%; margin-top: 50px;}
.foto-brs{margin-top:20px;}
.foto-border{
    background: #fff;
    border:1px solid #E9E9E9;
    -moz-box-shadow: 0px 0px 5px rgba(68,68,68,0.2);
    -webkit-box-shadow: 0px 0px 5px rgba(68,68,68,0.2);
    box-shadow: 0px 0px 5px rgba(68,68,68,0.2);
    padding:2%;
}
.foto-border img{width: 100%;cursor:pointer;}
p.heading{font-family: 'Droid Serif'; font-size:1.3em; text-align: center;}
.heading-home {font-size:110%;}
.full{width: 100%; float:left;}
.half{width: 46%; margin-right: 4%; float:left;}
.half.left-margin{margin-left: 4%; margin-right: 0%;}
.full_h1{height:130px;width: 100%;}
.full_h1.center{text-align: center;}
.one3{width:29.3%;margin:0 2%;float:left;}
.one3.left-margin{margin-left:4%;margin-right:0%;}
.one3.last{margin-left:0%;margin-right:0%;width:33%;}
.two3{width:63.6%;margin-right:3%;float:left;}
.two3.full{width:66.6%;float:left;margin: 0;}
.two3.center{width:63.6%;margin-right:3%;float:none;margin:0 auto; text-align: left;}
.two3.left-margin{margin-left:3%;margin-right: 0;}
.one3.left-margin{margin-left:3%;margin-right:0%;}
.one3.text_image{margin-left:0; margin-right:3% }
.text_image{text-align: center; margin-top:10px;margin-bottom:10px; }
.text_image img{width: 100%;}
.one4{width:23%;margin:0 1%;float:left;}
.two4{width:48%;margin-right:2%;float:left;}
.two4.left-margin{margin-right:0;margin-left:2%;}
.three4{width:73%;margin-right:2%;float:left;}
.three4.left-margin{margin-right:0;margin-left:2%;}
.dropcap{font-size: 1.7em;}
#main section.normal .quote{font-family: 'Droid Serif'; font-style: italic;}
#main section.normal h1{
    margin:5px 0;}
#main section.normal h2{
    margin:5px 0;
    margin-top:10px;
}

.home-middle .one3{width:29.3%;margin:0 2%;float:left;padding-top: 2%;}
.home-middle .border-box{    border-left: 1px solid #EDEDED;
                             margin: 0;
                             padding-left: 1.9%;
                             padding-right: 1.9%;}

.home-middle .whitespace,.home-middle2 .whitespace{height: 24px;}



.home-middle2 section{padding-top: 2%;}
#kabar h4 {margin-top: 5px;}
.article-list {margin-top:20px;border:1px solid #EDEDED; border-radius:4px; padding: 0 10px 0 10px;background: #E1EBF6;}

.article-list ul {padding-left: 20px;}

.kabar-content h3{margin:0; }
.kabar-content p{margin:5px 0; }
#main section.normal .label24 {width:auto; margin-top:40px;}
#main section.normal .label24 img{width:auto;}
#main section.kamiunggul li{margin-bottom:50px; list-style: none;}
#main section.kamiunggul h3{font-size:1.2em;}
/********************************FORM*/
#main ul.contact-list {
    padding: 0 0 0 10px;
}
#main .contact-list li {
    list-style: none;
    padding:5px 0 15px 40px;
}
#main .contact-list li img {
    float: left;
}
#main .contact-list li.home {
    background:url('../img/icon/icon_home.png') no-repeat;
    padding-bottom:0px;
}
#main .contact-list li.tlp {
    background:url('../img/icon/icon_tlp.png') no-repeat;
    padding-top:10px;
}
#main .contact-list li.hp {
    background:url('../img/icon/icon_hp.png') no-repeat;
}
#main .contact-list li.email {
    padding-top:3px;
    background:url('../img/icon/icon_msg.png') no-repeat;
}
#main .form-contactus {width: 100%;background: #29A7DA;float:left;}
#main .form-contactus form{width: 90%;margin: 5%; font-size: 120%; color:#fff; float: left;}
#main .form-contactus label{width: 20%;float:left;margin:10px 0;}
.lt-ie9 #main .form-contactus label{clear:left}
#main .form-contactus label.error{width: 100%;float:left;margin:10px 0; color:red;font-size:100%;}
#main .form-contactus input[type="text"],#main .form-contactus textarea{width: 75%;float:left;margin:10px 0;}
#main .form-contactus input[type="submit"]{width: 30%;float:left;background: #4a4b48;border:none;color:#fff;margin:10px 0 0 20%;}
#main .form-contactus input.error{border:1px solid red;color:red;}
.text_right{text-align: right;}
.text_center{text-align: center;}
.form-admin{width: 100%;}
.form-admin label{width: 100%;float:left;}
.form-admin input[type="text"],.form-admin textarea{width: 100%;float:left;margin-bottom:20px}
.form-admin textarea{height:300px;}
.form-admin select{width: 30%;float:left;margin-bottom:20px}
.form-admin input[type="checkbox"]{float:left;margin-bottom:20px;clear:left;}
.form-admin input[type="submit"]{width: 30%;float:left;background: #4a4b48;border:none;color:#fff;clear:left}
.form-admin.login input[type="text"],.form-admin.login input[type="password"]{width: 40%;clear:left;float:left;}


.dialog-box {display:none;}

.list .row.header{background-color:#ebebeb; padding:12px 5px 9px;font-size:1.2em;}
.list .row{border-bottom:1px solid #EBEBEB; padding:8px 5px 5px;float:left; width: 100%;}
.list .column{width: 27%;margin-right: 3%; float:left;}
.list .column.small{width: 19%;margin-right: 1%;}
.list .column.panel ul {margin: 0;padding:0;}
.list .column.panel ul li{width: 27%;margin-right: 20%; float:left;list-style: none;}
.list .row:last-child{border-bottom:none;}
.list .row:hover{background-color:#F2F2F2}
.list .column.content {display: none; margin-top:30px;width: 100%; word-wrap : break-word;}

/*PRODUK---------------------------------------*/
#main section.produk {
    width:28.5%;
    padding:0 2%;
    float:left;
}

#main section.produk h2 {
    margin-top:0;
    color: #C1C1C0;
}

.form-post{word-wrap:break-word}

section .header{height:45px; padding-left:55px;}
section .header a{color:#4A4A49;font-weight: 600;}
section .header a:hover{color:#29A7DA}
section .header.produk{ background:url(../img/icon_produk.png) 0 0 no-repeat}
section .header.katamereka{ background:url(../img/icon_katamereka.png) 0 0 no-repeat}
section .header.partner{ background:url(../img/icon_partner.png) 0 0 no-repeat}
section .header.jaminan{background:url(../img/icon_jaminan.png) 0 0 no-repeat}
section .header.berita{background:url(../img/icon_berita.png) 0 0 no-repeat}
.lt-ie9 section .header.jaminan{padding-left:150px;}

section .header.karya{background:url("../img/icon_karya.png") no-repeat scroll 0 0 transparent }
section .header.karya h3,section .header.berita h3{margin:5px 0}
.lt-ie7 .one3{width: 27%;}
.produk-box {

    background-color:white;
    border-radius: 4px;
    float:left;
    margin-bottom: 20px;

    -moz-box-shadow: 0px 0px 5px rgba(68,68,68,0.2);
    -webkit-box-shadow: 0px 0px 5px rgba(68,68,68,0.2);
    box-shadow: 0px 0px 5px rgba(68,68,68,0.2);
    text-align: center;
    width: 100%;
}

.produk-box p{
    font-size:1.2em; 
    border-top:1px solid #dededd;  
    padding: 5px 0;
    margin: 5px 0;
}
.produk-box img{
    width: 90%;
    margin: 0 auto;}

.produk-box.small img{
    width: 75%}


#main .faq ul li.list{
    margin-bottom: 40px;
    list-style: none;
}
#main .faq .answer{

}
#main .faq h2{
    font-size: 1.7em;
}

#main .testimoni-quote{
    padding-left:20px;
    background: url('../img/quote-separator.png') 1px 15% no-repeat;
}
#main .testimoni-quote .box{
    background-color: #e5eff3;
}
#main .testimoni-quote .box p{
    padding:20px;
    font-family: 'Droid Serif',sans-serif;
    margin-top: 0;
}

#google-maps iframe{
    width: 100%;
    height: 300px;
}

.karya-big {background: #000;display:none;margin-bottom:50px;text-align: center;height: 0;}
.karya-list {background-color: #e5e5e5; opacity: 1; margin-top:1%;}
.lt-ie9 .karya-list {margin-top:0%;}
.karya-list p{color:#4b4b4b;text-align: center;}
img.full_img_height{width: auto; height: 181px;}
.image-border {position: relative;text-align: center;}
.image-border img{height:110px;}
.zoom {position:absolute;top:40%; left:40%;}

.clear{clear:left;}
.clear.logo{border-bottom: 1px solid #EBEBEB;
            height: 9px;
            position: relative;
            width: 100%;
            margin:15px 0;
}
.clear.separator{border-bottom: 1px solid #EBEBEB;
                 position: relative;
                 width: 100%;
}
.clear.logo img{left: 48.8%; position: absolute;}
.whitespace {height: 50px;width: 100%; float: left;}

a.readmore {
    background-color: #1d1d1b;
    border-radius: 4px;
    color: white;
    padding: 3px 10px;
    text-decoration: none;
    clear:left;
    float: left;
}
a.readmore:hover {
    background-color: #4b4b4a;
}
a.unduh:hover {
    background-color: #4b4b4a;
}
a.unduh {
    background-color: #55c3f1;
    border-radius: 4px;
    color: white;
    padding: 4px 6px;
    text-decoration: none
}
#main aside{
    color:white;
    padding:0px 5% 10px;
}

footer{ text-align: center; font-size:85% ; padding: 20px 0;}
.back-top{position :fixed;bottom:20px;right:20px;display:none;opacity:1;
          cursor:pointer;z-index: 99;}

ul.tags{
    display: block;
    float:left;
    padding-left: 0;
}
ul.tags li{
    list-style: none;
    float:left;

}
ul.tags li a{
    border-radius:4px;
    background-color:#E6E6E6;
    padding:3px 10px;
    margin:0 5px;

}
ul.tags li a:hover{
    background-color:#ECECEC;
}

/* ===============
    ALL: IE Fixes
   =============== */

.ie7 #title{ padding-top:20px; }


/* ===== Primary Styles ========================================================
   Author:Olivo Pablo
   ========================================================================== */
/*plugin*/

#zoom { position: absolute; display: none; z-index: 499; -webkit-box-shadow: 0px 5px 25px #000; -moz-box-shadow: 0px 5px 25px #000; box-shadow: 0px 5px 25px #000; }
#zoom_img { display: block; cursor: pointer; width: 100%; border: 0; margin: 0; padding: 0; }
#zoom_close { position: absolute; display: none; cursor: pointer; left: -15px; top: -15px; width: 30px; height: 30px; background: url(../img/zoom/closebox.png) no-repeat; }
#zoom_spin { position: absolute; display: none; z-index: 525; width: 50px; height: 50px; background: url(../img/zoom/spin.png) no-repeat; }



.flexslider .nav-wrapper{
    position:absolute;
    height: 40px;
    z-index: 99;
    background: #fff;
    float:left;
    bottom:10%;
    opacity:0.6;
}

.flexslider .nav-wrapper ul{
    margin:0 auto;
}

.flexslider .nav-wrapper li {
    float: right;
    list-style: none;
    cursor:pointer;
}

.flexslider .nav-wrapper li img {
    opacity:0.2;
}

.slide {position:relative;float: left;}
.slide:first-child .slide_caption,.slide:last-child .slide_caption {opacity:0; padding-left:0;}


.slide_caption{position: absolute;}
.slide_caption.slide1{
    top:25%;
    right: 2%;
    display: block;
    width: 35%;
    color:#F7F6F3;
}

.slide_caption.slide2{
    top:30%;
    left: 3.5%;
    display: block;
    width: 35%;
    color:#f2f0f4;
    font-size: 120%;
}

.slide_caption.slide2 h2{
    line-height: 1.2;
}

.slide_caption.slide3{

    top: 20%;
    color: #F2F0F4;
    display: block;
    height: 45%;
    right: 0;
    text-align: right;
    width: 32%;
}


.slide_caption.slide3 h2{
    padding: 2% 9% 2% 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.slide_caption.slide4{
    background-color: rgba(0, 0, 0, 0.5);
    color: #F2F0F4;
    display: block;
    height: 50%;
    padding: 10px 10px 10px 30px;
    left: 0;
    text-align: left;
    top: 10%;
    width: 25%;
}
.slide_caption.slide5{
    color: #33342E;
    display: block;
    height: 45%;
    left: 5%;
    padding: 10px;
    text-align: left;
    top: 1%;
    width: 40%;
}

.slide_caption.slideKarya{
    background-color: rgba(0, 0, 0, 0.7);
    color: #F2F0F4;
    display: block;
    float: right;
    right: 0;
    text-align: right;
    top: 20%;
    padding-right: 20px;
    width: 32%;
}

.open-dialog{cursor:pointer}

.skype_pnh_text_span{color:#fff}
/* =============================================================================
   caroursel
   ========================================================================== */

#revolver_carousel{
    width:90%;
    height: 100%;
    overflow: hidden;
    position: relative;
    height: 190px;
    margin:0 auto;
}

.carousel-nav-wrapper ul{
    text-align: center;
    padding: 0;
}

.carousel-nav-wrapper a.next,.carousel-nav-wrapper a.prev{
    position:absolute;
    display: inline-block;
    list-style: none;
    cursor:pointer;
    top: 50%;
}

.carousel-nav-wrapper a.next {
    right:1.9%;
}
.carousel-nav-wrapper a.prev {
    left:1.9%;
}
.carousel-nav-wrapper img {

}

.show-mobile {display:none;}

nav .dropdown { display: none;}

.flash.success {color:#31ABDC}
.flash.error {color:#F16529}
/* =============================================================================
   Media Queries
   ========================================================================== */
.wrapper{
    width:1140px; /* 1140px - 10% for margins */
    margin:0 auto;
}

.lt-ie9 .wrapper{
    width:980px; /* 1140px - 10% for margins */
    margin:0 auto;
}

.lt-ie9 body{font-size:90%}

@media only screen and (min-width: 1140px) {

    .slide_caption.slide5 {

        top: 12%;

    }

}

@media only screen and (max-width: 1024px) {

    html { 
        background:url(../img/bluebackground.png) 0 -40px repeat-x,#f1f1f1;
    }


    .wrapper{
        width:978px; /* 1140px - 10% for margins */
        margin:0 auto;
    }


    .produk-box.small img{
        width: 100%}

    nav li.contact {
        padding: 10px 0.5%;
    }

}

@media only screen and (max-height:770px){
    #main section.normal .subheader h2 {
        margin: 3px 0;
    }

    #main section.tagline h1 {
        margin: 0;
    }

    #main section.tagline {
        float: left;
        margin: 5px 0;
        width: 100%;
    }
    .whitespace {height: 15px;width: 100%; float: left;}
}

@media only screen and (max-width: 800px) {
    html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;  
           background:url(../img/bluebackground.png) 0 -150px repeat-x,#f1f1f1;
    }
    /* ===============
        Maximal Width
       =============== */
    header.wrapper{width: 100%;}
    .wrapper{
        width:98%; 
        margin:0 auto;

    }
    .slide_caption.slide2{width: 30%;}


    .slide_caption.slide3 h2{
        padding: 2% 6% 2% 0;
    }

    .whitespace{height: 20px;}

    body{font-size:12px;}
    h1,h2,h3,h4 {font-size:150%;letter-spacing: 0px;}


    .home-middle h3 {padding-top:5px;}

    #main .form-contactus label{width: 100%;float:left;margin:5px 0;}
    #main .form-contactus input[type="text"],#main .form-contactus textarea{width: 90%;margin:5px 0;padding:5px;}
    #main .form-contactus input[type="submit"]{width: 30%;float:left;background: #4a4b48;border:none;color:#fff;margin:10px 0 0 20%; padding:6px 10px}

    .cfs-logo {
        width: 40%;
    }
    .medial {
        font-size: 100%;
    }



}

@media only screen and (max-width: 740px) {
    nav ul .contact img{display:none}

}



/****** iPad (portrait) ******/
@media only screen and (min-width: 481px) and (max-width: 1023px) {	

    nav li.contact.first{
        padding-right:1%;
    }

    section .header.jaminan{background:url(../img/icon_jaminan.png) 0 0 no-repeat;}
    section .header.karya{background-position: 30% 0}
    section .header.berita h3{padding-top:5px;}

    #revolver_slider{
        height: 256px;
    }
    #revolver_carousel{
        height: 131px;
    }

    #contact-us label{display:none;}

}

/* Blackberry Bold 9810 Landscape*/
@media only screen and (max-height: 480px) and (max-width:640px ){

    nav .contact{display: none;}
}


@media only screen and (max-width: 600px) {
    html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;  
           background:url(../img/bluebackground.png) 0 -150px repeat-x,#f1f1f1;
    }
    /* ===============
        Maximal Width
       =============== */


    nav .contact{display: none;}
}


@media only screen and (max-width: 480px) {
    .show-mobile{display:block}
    .one3, .two3, .two3.center, .half {width: 100%; margin:0;}

    section.home-karya {
        border-left: none;
    }
    .two3.home-karya {width: 100%}
    #revolver_carousel .one3 {margin:0 2%; width: 29.3%;}

    section .header.karya{
        background-position:0 0;
        text-align: left;
        padding-left:55px;
    }


    .lt-ie7 .one3{width:100%}
    .home-middle .half {width: 45%}
    .home-middle .one3 {width: 100%; margin:0; padding:0; border:0}
    body{font-size:12px;}

    .hidden-mobile {display:none;}
    .cfs-logo{text-align: center;width: 100%}
    #karya-page .one4 {width: 100%}

    .one3.last {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    ul, ol {
        margin: 1em 0;
        padding: 0 0 0 10px;
    }

    #revolver_slider{
        height: 165px;
    }

    .slide_caption.slide1{right: 0;
                          top: 20%;}

    #revolver_carousel{
        height: 97px;
    }


    .nav-wrapper{display:none}

    article.home section{background: #33342E;}



    .slide_caption.slide4 {
        height: 150%;
        left: 0;
        top: 0;
        width: 32%;
    }

    .slide_caption.slide2 {
        left: 1.5%;
        top: 5%;
    }

    .slide_caption.slide3 {
        top: 0%;
        width: 38%;
    }

    .slide_caption.slide3 h2 {
        font-size: 120%;

    }

    .slide_caption.slide5{
        left: -9px;
        padding: 1px;
        top: 15%;
        width: 46%;
    }
    nav {position: relative;}
    nav .dropdown {display: block;}
    nav a{width: 100%;padding:12px 0%;}

    article.welcome {
        background: url("../img/profic81r-small.png") no-repeat scroll 50% 10%, none repeat scroll 0 0 #E1EBF6;
        padding: 180px 4% 0 0;
        z-index: 10;
    }
    .slide_caption.slideKarya {

        top: 0%;
width: 45%;
    }

}


@media only screen and (max-width: 320px) {


    #revolver_carousel{
        height: 68px;
    }


    #submenu li{padding:3px 1%}
    body{font-size:11px;}

    section .header.jaminan{background-position:0 0;}
    section .header.karya{background-position:0 0;padding-left:0px }
    .text_center{text-align: left;}

    #revolver_carousel{
        height: 68px;
    }

    .home-middle{}
    .home-karya{display:none;}

    .back-top{bottom:0px;right:0px;}



}

/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* =============================================================================
   Print Styles
   ========================================================================== */

@media print {
    * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
    a, a:visited { text-decoration: underline; }
    a[href]:after { content: " (" attr(href) ")"; }
    abbr[title]:after { content: " (" attr(title) ")"; }
    .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    thead { display: table-header-group; } /* h5bp.com/t */
    tr, img { page-break-inside: avoid; }
    img { max-width: 100% !important; }
    @page { margin: 0.5cm; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3 { page-break-after: avoid; }
}

/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#fff;}
#colorbox{font-size: 120%;}
#cboxTopLeft{width:25px; height:25px; background:url(images/border1.png) no-repeat 0 0;}
#cboxTopCenter{height:25px; background:url(images/border1.png) repeat-x 0 -50px;}
#cboxTopRight{width:25px; height:25px; background:url(images/border1.png) no-repeat -25px 0;}
#cboxBottomLeft{width:25px; height:25px; background:url(images/border1.png) no-repeat 0 -25px;}
#cboxBottomCenter{height:25px; background:url(images/border1.png) repeat-x 0 -75px;}
#cboxBottomRight{width:25px; height:25px; background:url(images/border1.png) no-repeat -25px -25px;}
#cboxMiddleLeft{width:25px; background:url(images/border2.png) repeat-y 0 0;}
#cboxMiddleRight{width:25px; background:url(images/border2.png) repeat-y -25px 0;}
#cboxContent{background:#fff; overflow:hidden;}
#cboxContent img{width: 100%;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:20px;}
#cboxTitle{position:absolute; bottom:-5px; left:0; text-align:center; width:100%; color:#2EA9DB;}
#cboxCurrent{position:absolute; bottom:0px; left:150px; color:#999;}
#cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
#cboxPrevious{position:absolute; bottom:-5px; left:0; color:#444;}
#cboxNext{position:absolute; bottom:-5px; left:60px; color:#444;}
#cboxLoadingOverlay{background:#fff url(images/loading.gif) no-repeat 5px 5px;}
#cboxClose{position:absolute; bottom:-5px; right:0; display:block; color:#444;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/*
  The following provides PNG transparency support for IE6
  Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
*/
.cboxIE6 #cboxTopLeft{background:url(images/ie6/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(images/ie6/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(images/ie6/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(images/ie6/borderBottomLeft.png);}
.cboxIE6 #cboxBottomCenter{background:url(images/ie6/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(images/ie6/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(images/ie6/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(images/ie6/borderMiddleRight.png);}

.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
    _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}



/*-----------------------------------------------------------------------------------------*/
/*
 * jQuery FlexSlider v2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
*/


/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {margin: 0; padding: 0;position:relative;}
.flexslider .slides > .slide {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.slides > .slide:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider { zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}
.carousel li {margin-right: 5px}

/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(../js/libs/flexslider/images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
.flex-direction-nav .flex-prev {left: -36px;}
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; }
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.flex-active { background: #000; background: #34ADDC; cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
